<nz-row [nzGutter]="[8, 12]">
  <nz-col nzFlex="auto">
    <ng-container *ngrxLet="selectDisplay$ as display">
      <cvc-mp-finder
        *ngIf="display.showFinder && !editorOpen"
        (cvcOnSelect)="onMpSelect$.next($event)"></cvc-mp-finder>

      <div
        class="editor-message"
        *ngIf="editorOpen">
        &nbsp;
        <span
          nz-typography
          nzEllipsis
          nzType="secondary">
          <i
            >Select or create a Molecular Profile with the expression editor
          </i>
        </span>
      </div>

      <!-- using inline-block here to shrink select to size of its tag contents,
      reducing the changes a user will click within it and cause the search dropdown to appear -->
      <div
        class="select-container"
        *ngIf="display.showSelect && !editorOpen">
        <div class="limit-select-width">
          <cvc-entity-select
            [cvcSelectMode]="props.isMultiSelect ? 'multiple' : 'default'"
            [cvcCustomTemplate]="selectedTemplate"
            [cvcFormControl]="formControl"
            [cvcFormlyAttributes]="field"
            [cvcEntityName]="props.entityName"
            [cvcPlaceholder]="props.placeholder"
            [cvcResults]="result$ | ngrxPush"
            [cvcDisabled]="props.disabled"
            [cvcAllowClear]="false"
            [cvcOptions]="selectOption$ | ngrxPush"
            [cvcShowError]="showError"
            [cvcLoading]="isLoading$ | ngrxPush"
            [cvcBorderless]="true"
            [cvcSuffixIcon]="null"
            [cvcShowArrow]="false"
            (cvcOnSearch)="onSearch$.next($event)"
            (cvcOnModelChange)="props.change && props.change(field, $event)">
          </cvc-entity-select>
        </div>
      </div>
    </ng-container>
  </nz-col>
  <nz-col nzFlex="50px">
    <button
      type="button"
      nz-button
      nzBlock
      class="expression-button"
      nz-tooltip
      nzTooltipTitle="Add/Edit Complex MP Expression"
    (click)="onShowExpClick$.next()">
      <span
        nz-icon
        [ngClass]="{
          show: (showExp$ | ngrxPush),
          hide: !(showExp$ | ngrxPush)
        }"
        [nzType]="'caret-right'"></span
      >Editor
    </button>
  </nz-col>
  <nz-col
    nzSpan="24"
    class="editor-drawer"
    *ngIf="showExp$ | ngrxPush as showExp">
    <cvc-mp-expression-editor
      [cvcPrepopulateWithId]="onMpId$ | ngrxPush"
      (cvcOnSelect)="onMpSelect$.next($event)"></cvc-mp-expression-editor>
  </nz-col>
</nz-row>
<!-- select option templates -->
<!-- result$ updates generate an array of #optionTemplates. entity-tag-field.mixin watches #optionTemplates changes, and attaches each to an NzSelectOptionTemplateInterface object, which are emitted from selectOption$. selectOption$ is passed to <cvc-entity-select> via [cvcOptions] above -->
<ng-container *ngrxLet="onSearch$ as searchString">
  <ng-container *ngFor="let result of result$ | ngrxPush; index as i">
    <ng-template #optionTemplates>
      <cvc-entity-tag
        [cvcDisableLink]="true"
        [cvcCacheId]="result.__typename + ':' + result.id"
        [cvcEmphasize]="searchString"></cvc-entity-tag>
      <span
        nz-typography
        nzType="secondary">
        Aliases:
        <ng-container
          *ngIf="result.molecularProfileAliases.length > 0; else noAliases">
          <em>
            <span
              nz-typography
              nzType="secondary"
              [innerHtml]="
                result.molecularProfileAliases.join(', ')
                  | highlightTypeahead : searchString
              "></span
          ></em>
        </ng-container>
        <ng-template #noAliases>--</ng-template>
      </span>
    </ng-template>
  </ng-container>
</ng-container>

<!-- selected option item template -->
<!-- displays entity tag, specifying context and mode depending on
    if field is multi-select or single -->
<ng-template
  #selectedTemplate
  let-selected>
  <div class="ant-select-selection-item-content">
    <cvc-entity-tag
      [cvcCacheId]="'MolecularProfile:' + selected.nzValue"
      [cvcContext]="props.isMultiSelect ? 'multi-select-item' : 'select-item'"
      [cvcMode]="props.isMultiSelect ? 'default' : 'closeable'"
      (cvcOnClose)="onTagClose$.next(selected.nzValue)"></cvc-entity-tag>
  </div>
</ng-template>
